import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { CArtistItemWrapper } from './style'
import type { ArtistType } from '@/views/discover/c-page/artist/store/type'
import { getImageSize } from '@/utils/HandlerImg'
interface IProps {
  children?: ReactNode
  data: ArtistType
  index: number
}

const CAtristItem: React.FC<IProps> = (props) => {
  const { data, index } = props
  return (
    <CArtistItemWrapper>
      {index < 10 && (
        <div className="image">
          <img src={getImageSize(data.img1v1Url, 130)} alt="" />
        </div>
      )}
      <div className="info">
        <span className="name">{data.name}</span>
        <i className="sprite_icon2 icon"></i>
      </div>
    </CArtistItemWrapper>
  )
}

export default memo(CAtristItem)
